<template>
	<view>
		<view class="waterfall-box" v-for="(item, index) in list" :key="index">
			<view @click="getDetail(item.id,item.userId)">
				<u-image :src="item.images | fgs" :lazy-load="true" radius="10" width="100%"></u-image>
			</view>
			<view class="cont">
				<view class="box-item-title" @click="getDetail(item.id,item.userId)">
					{{item.title}}
				</view>
				<view class="box-item-you">
					<view>
						<image src="../static/images/home_ico_youhui.png" mode="widthFix"></image>
						优选超值单人餐{{item.comments}}
					</view>
				</view>
				<view class="box-item-tag">
					<view class="tag1" @click.stop="tiaoz(item.userId)">
						<image src="../static/images/home_ico_youhui.png" mode="widthFix"></image>
						<text>{{ item.name }}</text>
					</view>
					<view class="tag2">
						<view class="save-incons" @click.stop="changeSa(item.id)">
							<uni-icons color="#ff6600" :type="isLike ? 'heart-filled':'heart'" size="18"></uni-icons>
							<text v-html="item.liked"></text>
						  </view>
					</view>
				</view>
			</view>	
		</view>
	</view>
</template>
 
<script>
	export default {
		name:"MyGoodsDemo",
		// props:{
		// 	list:{
		// 		type:Array,
		// 		default:[]
		// 	}
		// },
		props:["list"],
		data() {
			return {
				isLike:false
			};
		},
		filters:{
			fgs(str){
				let imgs = str.split(',');
				// console.log(imgs)
				return imgs[0]
			}
		},
		methods:{
			changeSa(id){
				this.likeTab(id);
			},
			likeTab(id){
				uni.request({
					url:'/blog/like/'+id,
					method:'PUT',
					header:{
						'Accept':'*/*',
						'content-type': 'application/json;charset=utf-8',
						'Authorization':uni.getStorageSync('yystoken')
					} ,
					success:(obj)=>{
						console.log("点赞:",obj)
						if(obj.data.success){
							uni.showLoading({
								title:'关注成功'
							})
							this.isLike = true
						}
						setTimeout(() => {
							uni.hideLoading();
						}, 1000);
						
					}
				})
			},
			getDetail(shopId,userId){//接收 参数 id
			console.log(shopId)
				// 跳转到详情页  --  根据参数加载对应的数据
				uni.navigateTo({
					url: '/pages/home/homeDataile/homeDataile?id='+shopId+'&userId='+userId
				})
			},
			tiaoz(id){
				uni.navigateTo({
					url:'/pages/userHome/userHome?id='+id
				})
			}
		}
	}
</script>
 
<style lang="scss">
.waterfall-box {
	border-radius: 16rpx;
	// margin: 10rpx;
	background-color: #ffffff;
	// padding: 16rpx;
	margin-bottom: 20rpx;
	position: relative;
	.cont{
		padding: 4rpx 15rpx 22rpx;
	}
	.box-item-title{
		line-height: 1.5;
		font-size: 24rpx;
		margin-top: 10rpx;
		color: #252525;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;				
		text-overflow: ellipsis;		
		display: -webkit-box;			
		-webkit-line-clamp: 2;			
		line-clamp: 2;					
		-webkit-box-orient: vertical;	
	}
	.box-item-price{
		font-size: 30rpx;
		color:#ff4142;
		margin-top: 10rpx;
	}
	.box-item-tag{
		display: flex;
		justify-content: space-between;
		margin-top: 10rpx;
		.tag1{
			display: flex;
			align-items: center;
			image{
				width: 35rpx;
				height: 35rpx;
				border-radius: 50%;
			}
			text{
				font-size: 19rpx;
				color: #666;
				margin-left: 15rpx;
			}
		}
		.tag2{
			
			color: #666666;
			font-size: 19rpx;
			.save-incons{
				display: flex;
				align-items: center;
				text{
					margin-left: 2px;
				}
			}
		}
		
	}
	.box-comment{
		font-size: 22rpx;
		color: $u-tips-color;
		margin-top: 5px;
	}
	.box-item-you{
		margin-top: 10rpx;
		image{
			width: 24rpx;
			margin-right: 6rpx;
			position: relative;
			top: 2rpx;
		}
		view{
			font-size: 15rpx;
			color: #E66740;
			display: inline-block;	
			align-items: center;
			background: #FFF0E6;
			padding: 2px 15rpx 2px 3px;
			border-radius: 16rpx;
		}
	}
}
</style>